
<template>
  <div class="app-container">
     <el-row :gutter="20">
         <el-col :span='4'>
             <el-card :body-style="{padding:'10px',textAlign:'center'}">
                 <div class="vertical-tabs">
                     <div class="tab-item" v-for="(val,index) in tabs" :key="val.name" :class="{actived:index===activedTabIndex}" @click="changeTab(index)">{{val.name}}</div>
                 </div>
             </el-card>
         </el-col>
         <el-col :span="20">
            <el-row>
                <el-card :body-style="{padding:'10px'}">
                    <el-form label-position="left" label-width="68px" class="search-form-statistic">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="公告类型" style="margin-bottom: 0!important;">
                                     <el-select v-model="publicType" placeholder="请选择">
                                        <el-option
                                        v-for="item in publicOptions"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="上线状态" style="margin-bottom: 0!important;">
                                     <el-select v-model="onlineType" placeholder="请选择">
                                        <el-option
                                        v-for="item in onliveStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <el-form-item label="统计区间" style="margin-bottom: 0!important;">
                                    <el-radio-group v-model="countRangeType">
                                        <!-- <el-radio :label="1" >今日</el-radio> -->
                                        <el-radio :label="1" >昨日</el-radio>
                                        <el-radio :label="2" >本周</el-radio>
                                        <el-radio :label="3" >上周</el-radio>
                                        <el-radio :label="4" >本月</el-radio>
                                        <el-radio :label="5" >上月</el-radio>
                                        <el-radio :label="6" >自定义&nbsp;
                                            <el-date-picker
                                            v-model="timeRange"
                                            :disabled="countRangeType!==6"
                                            type="daterange"
                                            range-separator="~"
                                            value-format="yyyy-MM-dd"
                                            :picker-options="pickerOptions"
                                            :clearable="false"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                            </el-date-picker>
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col  :span="2">
                                <el-button
                                        class="filter-item" type="primary"  @click.native="search"
                                    >
                                    查询
                                    </el-button>
                            </el-col>
                            <el-col :span="2">
                                <el-button
                                        class="filter-item"   @click.native="resetSearch"
                                    >
                                    重置
                                    </el-button>
                            </el-col>
                        </el-row>
                     </el-form>
                </el-card>
            </el-row>
            <el-row :style="{marginTop:'20px'}">
                    <el-card :body-style="{padding:'10px'}">
                        <el-row :style="{marginTop:'20px'}" >
                                <div class="card-body has-border">
                                        <el-table stripe
                                        :data="tableData" v-loading="listLoading" element-loading-text="加载中..."
                                        border
                                        fit
                                        style="width: 100%"
                                        id="out-table"
                                        >
                                            <el-table-column prop="label" align="center" label="公告类型"  ></el-table-column>
                                            <el-table-column prop="annCount" align="center" label="公告数量"  width="160"></el-table-column>
                                            <el-table-column prop="readCount" align="center" label="总阅读数"  width="160"></el-table-column>
                                            <el-table-column  prop="avgCount" align="center" label="篇均阅读数"  width="160"></el-table-column>
                                        </el-table>
                                            <div class="pagination-container">
                                            <el-pagination
                                                background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                :current-page.sync="listQuery.pageNum"
                                                :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                                                layout="total, sizes, prev, pager, next, jumper" :total="total"
                                            >
                                            </el-pagination>
                                        </div>
                                </div>
                        </el-row>
                    </el-card>
            </el-row>
         </el-col>
     </el-row>
  </div>
</template>

<script>
/**
 *  公告统计
 */
import moment from 'moment';

import {
    getPublicTypes,
    getAnnouncementlist
} from '@/api/publicStatistics'

moment.locale('zh-cn')


export default {
    name:'publicStatistics',
    data(){
        return{
            tabs:[{
                name:"沪深股票公告",
                id:'1',
                type:'stock'
            },{
                id:'2',
                name:'基金公告',
                type:'fund'
            },{
                id:'3',
                name:'三板公告',
                type:'thrboard'
            },{
                id:'4',
                name:'债券公告',
                type:'bond'
            }],
            activedTabIndex:0,
            publicType:'',
            onlineType:'',
            publicOptions:[],
            globalAnnounceType:"stock",
            onliveStatus:[{
                value:'',
                label:'全部'
            },{
                value:"0",
                label:"上线"
            },{
                value:'1',
                label:"下线"
            }],
            countRangeType:1,
            timeRange:[],
            copy_timeRange:[],
            listQuery:{
                pageSize:10,
                pageNum:1
            },
            total:null,
            tableData:[],
            listLoading:false,
            pickerOptions:{
                disabledDate:(time)=>{
                    return time.getTime() >Date.now() || time.getTime() === Date.now() ||time.getTime()< new Date().setFullYear((new Date().getFullYear() - 1))
                }
            }
        }
    },
    methods:{
        changeTab(index){
            this.activedTabIndex = index;
            this.globalAnnounceType = this.tabs[index].type;
            this.publicType = '';
            this.getTyleList();
            this.search();
        },
        handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.search();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val
            this.search();
        },
        getPublicSearchList(params){
            let that = this;;
            this.listLoading = true;
            getAnnouncementlist(that.globalAnnounceType,params).then(res=>{
                this.tableData = Array.isArray(res.Data)?res.Data:[];
                this.listLoading = false;
                this.total =  Number(res.PageInfo.Total);
            }).catch(err=>{
                this.listLoading = false;
            })
        },
        search(){
          let that = this;
          let start = new Date(that.timeRange[0]);
          start = moment(start.getTime()).format('YYYY-MM-DD');
          let end = new Date(that.timeRange[1]);
          end = moment(end.getTime()).format('YYYY-MM-DD');
            const params = {
                code:this.publicType,
                state:this.onlineType===''?null:this.onlineType,
                period:this.countRangeType,
                pageSize:this.listQuery.pageSize,
                pageNum:this.listQuery.pageNum,
                startDate:new Date(start+' 00:00:00'),
                endDate:new Date(end+ ' 23:59:59')
            }
            this.getPublicSearchList(params);
        },
        resetSearch(){

            this.publicType = '';
            this.onlineType = '';
            this.countRangeType = 1;
            this.listQuery.pageSize = 10;
            this.listQuery.pageNum =1;
            this.timeRange = [...this.copy_timeRange];
            this.search();
        },
        // 获取 今日、昨日、本周、上周、本月、上月的时间
        getTypeDate(type=1){
            let date = null;
            switch(type){
                // case 1:
                //     date = moment().format('YYYY-MM-DD');
                //     date = [date,date]
                //     break;
                case 1:
                     date = moment().subtract(1,'day').format('YYYY-MM-DD');
                     date = [date,date]
                    break;
                case 2:
                    date = moment().startOf('week');
                    date = [date.format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
                    break;
                case 3:
                     date = moment().subtract(1,'week').startOf('week')
                     date = [date.format('YYYY-MM-DD'),date.endOf('week').format('YYYY-MM-DD')]
                    break;
                case 4:
                     date = moment().startOf('month');
                     date = [date.format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
                    break;
                case 5:
                    date = moment().subtract(1,'month').startOf('month')
                    date = [date.format('YYYY-MM-DD'),date.endOf('month').format('YYYY-MM-DD')]
                    break;
                default:
                    date = moment().format('YYYY-MM-DD')
                    date = [date,date]
            }
            return date;
        },
        // 获取类型列表
        getTyleList(){
            let that = this;
            getPublicTypes({
                type:that.globalAnnounceType
            }).then(res=>{
                let temp = Array.isArray(res.Data)?res.Data:[];
                that.publicOptions = [...temp]
            })
        }
    },
    created(){
         const tempDateRange = this.getTypeDate(2);
        this.timeRange = [...tempDateRange];
        this.copy_timeRange = [...tempDateRange];
        this.getTyleList();
        this.search();
    },
    watch:{
        'countRangeType'(val){
            this.timeRange = this.getTypeDate(val);
        }
    }
}
</script>

<style lang='stylus'>

.vertical-tabs{
    display inline-block
    text-align center
    line-height 25px
    font-size 16px
    font-weight 400
    cursor pointer
    color #666
    border 1px solid #ccc
    .tab-item{
        padding 5px 10px
        border-bottom 1px solid #ccc
        &:last-child{
            border-bottom none
        }
        &.actived,&:hover{
            background-color #3DB0E7
            color #fff
        }
    }
}

.has-border{
    .el-table thead th {
        border 1px solid #ebeef5 !important
    }
}
.search-form-statistic .el-row{
  margin-bottom  10px !important
}
.search-form-statistic .el-radio{
    margin-right 10px
}
.search-form-statistic .el-range-editor{
    width 300px
}
</style>
